<script setup lang="ts" name="LuckyGrid3">
import bg from '@/assets/lottery/luckyGrid/luckyGrid3/bg.png'
import button from '@/assets/lottery/luckyGrid/luckyGrid3/btn.png'
import img01 from '@/assets/lottery/luckyGrid/luckyGrid3/1.png'
import img02 from '@/assets/lottery/luckyGrid/luckyGrid3/2.png'
import img03 from '@/assets/lottery/luckyGrid/luckyGrid3/3.png'
import img04 from '@/assets/lottery/luckyGrid/luckyGrid3/4.png'
import img05 from '@/assets/lottery/luckyGrid/luckyGrid3/5.png'
import img06 from '@/assets/lottery/luckyGrid/luckyGrid3/6.png'
import img07 from '@/assets/lottery/luckyGrid/luckyGrid3/7.png'
import img08 from '@/assets/lottery/luckyGrid/luckyGrid3/8.png'
import img09 from '@/assets/lottery/luckyGrid/luckyGrid3/9.png'
import img10 from '@/assets/lottery/luckyGrid/luckyGrid3/10.png'
import img11 from '@/assets/lottery/luckyGrid/luckyGrid3/11.png'
import img12 from '@/assets/lottery/luckyGrid/luckyGrid3/12.png'
import { lottery } from '@/api/lottery'
const luckyGridRef = ref(null)

const z = 60 // 格子细分数
const s = 12 // 格子大小
const m = 18 // y 轴偏移量
const n = 9 // x 轴偏移量
const k = 2.8 // 按钮放大的倍数

const initInfo = ref({
  blocks: [
    {
      padding: '3vw', imgs: [
        { src: bg, top: 0, width: '100%', height: '100%', rotate: true }
      ]
    }
  ],
  prizes: [
    { x: z / 2 - s / 2, y: 0, col: s, row: s, imgs: [{ src: img01, top: '10%', width: '80%', height: '80%' }] },
    { x: z - m - s / 2, y: n - s / 2, col: s, row: s, imgs: [{ src: img02, top: '10%', width: '80%', height: '80%' }] },
    { x: z - n - s / 2, y: m - s / 2, col: s, row: s, imgs: [{ src: img03, top: '10%', width: '80%', height: '80%' }] },
    { x: z - s, y: z / 2 - s / 2, col: s, row: s, imgs: [{ src: img04, top: '10%', width: '80%', height: '80%' }] },
    { x: z - n - s / 2, y: z - m - s / 2, col: s, row: s, imgs: [{ src: img05, top: '10%', width: '80%', height: '80%' }] },
    { x: z - m - s / 2, y: z - n - s / 2, col: s, row: s, imgs: [{ src: img06, top: '10%', width: '80%', height: '80%' }] },
    { x: z / 2 - s / 2, y: z - s, col: s, row: s, imgs: [{ src: img07, top: '-10%', width: '80%', height: '120%' }] },
    { x: m - s / 2, y: z - n - s / 2, col: s, row: s, imgs: [{ src: img08, top: '10%', width: '80%', height: '80%' }] },
    { x: n - s / 2, y: z - m - s / 2, col: s, row: s, imgs: [{ src: img09, top: '10%', width: '80%', height: '80%' }] },
    { x: 0, y: z / 2 - s / 2, col: s, row: s, imgs: [{ src: img10, top: '10%', width: '80%', height: '80%' }] },
    { x: n - s / 2, y: m - s / 2, col: s, row: s, imgs: [{ src: img11, top: '10%', width: '80%', height: '80%' }] },
    { x: m - s / 2, y: n - s / 2, col: s, row: s, imgs: [{ src: img12, top: '10%', width: '80%', height: '80%' }] }
  ],
  buttons: [
    { x: z / 2 - s / 2 * k, y: z / 2 - s / 2 * k, col: s * k, row: s * k, background: 'transparent', imgs: [{ src: button, top: 0, width: '100%', height: '100%' }] }
  ],
  defaultConfig: {
    gutter: 2
  },
  defaultStyle: {
    borderRadius: Infinity,
    background: '#ea6c4e'
  },
  activeStyle: {
    background: '#c94732'
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  luckyGridRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: 1 }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      luckyGridRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>九宫格-圆形十二宫格</span>
      </div>
    </template>
    <div class="lucky-grid-pane">
      <div class="lucky-grid-content">
        <LuckyGrid
          ref="luckyGridRef"
          width="18.625vw"
          height="18.625vw"
          :rows="z"
          :cols="z"
          :blocks="initInfo.blocks"
          :defaultConfig="initInfo.defaultConfig"
          :defaultStyle="initInfo.defaultStyle"
          :activeStyle="initInfo.activeStyle"
          :prizes="initInfo.prizes"
          :buttons="initInfo.buttons"
          @start="startCallback"
          @end="endCallback"></LuckyGrid>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #216ff0;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.lucky-grid-pane {
  width: 18.625vw;
  margin: 0.3vw auto;
  padding: 0;
  overflow: hidden;

  .lucky-grid-content {
    width: 100%;
    padding: 0;
    overflow: hidden;
  }
}
</style>
